<template>
	<view class="pending-orders">
		<u-toast ref="uToast"></u-toast>
		<view class="box">
			<view class="address">
				<view class="address_map">
					<view class="code">
						{{detailObj.num}}
					</view>
					<view class="code_title">
						取货码
					</view>
					<view class="map">
						<image style="width: 100%; height: 100%;" src="/static/img/map.png" mode=""></image>
					</view>
				</view>
				<view class="pick-up_address">
					<view class="pick-up">
						取件地址
					</view>
					<view class="ads">
						{{detailObj.barArea}}
					</view>
				</view>
				<view class="shipping_address">
					<view class="shipping">
						配送地址
					</view>
					<view class="ads">
						{{detailObj.userAddrVO.addr}}
					</view>
					<view class="user">
						<view class="info">
							<span>{{detailObj.userAddrVO.consignee}}</span>
							<span>{{detailObj.userAddrVO.mobile}}</span>
						</view>
						<img style="width: 60rpx; height: 60rpx;" src="@/static/img/phone.png" alt="" />
					</view>
				</view>
			</view>
			<view class="shop">
				<view class="shop_title">
					商品信息
				</view>
				<view class="shop_content">
					<img style="width: 150rpx; height: 150rpx; display: block;" :src="detailObj.barSpuVO.mainImgUrl" alt="" />
					<view style="width: 76%; display: flex; flex-direction: column; justify-content: space-between;">
						<view class="">
							{{detailObj.barSpuVO.name}}
						</view>
						<view class="">
							X<span>{{detailObj.count}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
<!-- 			<view v-if="state == 1" class="footer_confirm" style="width: 100%;" @click="btnOrderUpdate">
				确认取货
			</view> -->
			<view v-if="state == 2" class="footer_confirm" style="width: 68%;" @click="btnOrderUpdate">
				派送完成
			</view>
			<view v-if="state == 2" class="footer_upload">
				上传照片
			</view>
		</view>
	</view>
</template>

<script>
		import { riderPickById, getById, deliverySuccess } from '@/api/user.js'
		export default {
			data() {
				return {
					state: '',
					id: '',
					detailObj: {}
				}
			},
			onLoad(options) {
				this.state = options.tabIndex || ''
				this.id = options.id || ''
				getById({barRiderOrderId: this.id}).then(res => {
					this.detailObj = res.data
				})
			},
			methods: {
				btnOrderUpdate() {
					if (this.state == 1) {
						riderPickById({barRiderOrderId: this.detailObj.riderOrderId}).then(res => {
							if (res.code == '00000') {
								this.$refs.uToast.show({
									type: 'success',
									message: '确认取货',
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
									duration: 3000
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index?tabIndex=1'
									})
								},3000)
							}
						})
					}
					if (this.state == 2) {
						deliverySuccess({barRiderOrderId: this.detailObj.riderOrderId}).then(async res => {
							if (res.code == '00000') {
								await this.$refs.uToast.show({
									type: 'success',
									message: '确认取货',
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
									duration: 3000
								})
								await setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index?tabIndex=2'
									})
								},3000)
							}
						})
					}
				}
			}
		}
</script>

<style lang="scss" scoped>
	.pending-orders{
		padding: 20rpx;
		background-color: #F7F8FA;
		display: flex;
		flex-direction: column;
		height: 97vh;
		.box{
			flex: 1;
			flex-grow: grow;
			overflow: auto;
			.address{
				padding: 40rpx 20rpx;
				background-color: #fff;
				.address_map{
					text-align: center;
					.code{
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}
					.code_title{
						margin: 10rpx 0;
						font-size: 26rpx;
					}
					.map{
						width: 675rpx;
						height: 675rpx;
						background-color: pink;
					}
				}
				.pick-up_address{
					font-size: 26rpx;
					margin: 20rpx 0;
					.pick-up{
						color: #FF0000;
					}
					.ads{
						margin: 10rpx 0;
						line-height: 50rpx;
					}
				}
				.shipping_address{
					font-size: 26rpx;
					.shipping{
						color: #FFBF00;
					}
					.ads{
						margin: 10rpx 0;
						line-height: 50rpx;
					}
				}
				.user{
					font-size: 26rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
			.shop{
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				font-size: 26rpx;
				.shop_title{
					margin-bottom: 20rpx;
				}
				.shop_content{
					display: flex;
					justify-content: space-between;
					padding: 12rpx 0;
				}
			}
		}
		.footer{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
			;line-height: 70rpx;
			font-size: 26rpx;
			padding: 20rpx 0rpx;
			.footer_confirm{
				background-color: #165DFF;
				color: #fff;
				text-align: center;
				border-radius: 8rpx;
			}
			.footer_upload{
				width: 30%;
				border: 2rpx solid #101010;
				text-align: center;
				border-radius: 8rpx;
			}
		}
	}
</style>